<!doctype html>
<html class="no-js">
<head>
  <include file="./Apps/WebApp/View/default/common_meta.html" />
  <title>我的消息 - {$CONF['mallTitle']}</title>
  <meta name="keywords" content="{$CONF['mallKeywords']},我的消息" />
  <meta name="description" content="{$CONF['mallDesc']},我的消息" />
  <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/common.css?v={$WST_V}">
  <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/wst_page_common.css?v={$WST_V}">
  <link rel="stylesheet" href="__ROOT__/Apps/WebApp/View/default/css/users.css?v={$WST_V}">
</head>
<body>
  <div class="wst-page" id="wst-page1">
    <header class="wst-nav">
      <div class="am-g">
        <div class="am-u-sm-2">
          <a href="{:U('WebApp/Users/index')}" class="wst-header-left"><i class="am-icon-angle-left am-icon-sm"></i></a>
        </div>
        <div class="am-u-sm-8 wst-nav-center">
          <span class="wst-header-center">我的消息</span>
        </div>
        <div class="am-u-sm-2">&nbsp;</div>
      </div>
    </header> 

    <input type="hidden" name="" value="10" id="pageSize" autocomplete="off">
    <input type="hidden" name="" value="0" id="currPage" autocomplete="off">
    <input type="hidden" name="" value="" id="totalPage" autocomplete="off">
    <div class="messageslist-container">
      <div id="msg-list"></div>
    </div>
    <div style="display:none;width:100%;height:20px;text-align:center;" id="loading-icon"><i class="am-icon-spinner am-icon-spin"></i></div>
  </div>
  <div class="wst-page wst-page2" id="wst-page2" style="display:none;"></div>

  <div class="am-modal am-modal-confirm" tabindex="-1" id="wst-confirm">
    <div class="am-modal-dialog">
      <div class="am-modal-hd" id="confirmMsg"></div>
      <div class="am-modal-footer">
        <span class="am-modal-btn" data-am-modal-cancel>取消</span>
        <span class="am-modal-btn" data-am-modal-confirm>确定</span>
      </div>
    </div>
  </div>
  <div class="am-g wst-msg-modal" id="wst-msg-modal">
    <div class="am-u-sm-12 am-u-sm-centered" style="text-align:center;">
      <span class="wst-modal-content" id="wst-modal-content"></span>
    </div>
  </div>
  <div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="wst-default-loading">
    <div class="am-modal-dialog">
      <div class="am-modal-hd">Loading...</div>
      <div class="am-modal-bd">
        <span class="am-icon-spinner am-icon-spin"></span>
      </div>
    </div>
  </div>

  <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default" id="msgBottom" style="border-top:1px solid #D1D1D3;">
    <ul class="am-navbar-nav am-cf am-avg-sm-4" style="background-color:white;">
      <li onclick="toDelMsg();">删除消息</li>
    </ul>
  </div>
  <include file="./Apps/WebApp/View/default/common_js.html" /> 
  <include file="./Apps/WebApp/View/default/users/messages_details.html" /><!-- 消息详情页模板 --> 
  <script src="__ROOT__/Apps/WebApp/View/default/AmazeUI/assets/js/handlebars.min.js"></script>
  <script src="__ROOT__/Apps/WebApp/View/default/AmazeUI/assets/js/amazeui.widgets.helper.js"></script>
  <script src="__ROOT__/Apps/WebApp/View/default/js/wst_page_common.js?v={$WST_V}"></script>
  <script src="__ROOT__/Apps/WebApp/View/default/js/users.js?v={$WST_V}"></script>
  <script>
    //消息列表
    function getMessages(){
      $('#loading-icon').show();
      loading = true;
      var param = {};
      param.pageSize = 10;
      param.currPage = Number( $('#currPage').val() ) + 1;
      $.post(ThinkPHP.U('WebApp/Messages/getMessagesList'), param, function(data){
          var json = WST.toJson(data);
          var str = '';
          if(json && json.root && json.root.length>0){
              for(var i=0; i<json.root.length; i++){
                  str += '<div class="am-g msg-row">';
                  str += '<a href="#msgDetails&'+json.root[i].id+'">';
                  str += '<div class="am-u-sm-11 msg-title">';
                  str += '<i class="am-icon-envelope-o am-icon-sm envelope-icon';
                  if( json.root[i].msgStatus == 0 ){
                    str += ' active';
                  }
                  str += '"></i>' + json.root[i].msgContent;
                  str += '</div></a>';
                  str += '<div class="am-u-sm-1 middle-text">';
                  str += '<i class="am-icon-circle-thin am-icon-sm circle-icon" msgId="'+json.root[i].id+'" onclick="changeIconStatus($(this), 1);"></i>';
                  str += '</div></div>';
              }
              $('#currPage').val(json.currPage);
              $('#totalPage').val(json.totalPage);
          }else{
            str += '<div class="am-g list-empty">';
            str += '<div class="am-u-sm-12 am-u-sm-centered" style="text-align:center;">';
            str += '<span class="list-empty-tips">对不起，没有相关消息。</span>';
            str += '</div>';
            str += '</div>';
        }
          $('#msg-list').append(str);
          loading = false;
          $('#loading-icon').hide();
      });
    }
    $(document).ready(function(){
        getMessages();

        var currPage = totalPage = 0;
        var loading = false;
        $(window).scroll(function(){ 
            if (loading) return;
            if ((5 + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
                currPage = Number( $('#currPage').val() );
                totalPage = Number( $('#totalPage').val() );
                if( totalPage > 0 && currPage < totalPage ){
                  getMessages();
                }
            }
        });
    });
  </script>
</body>
</html>